<script lang="ts">
  export default {
    name: 'Home',
  };
</script>

<script setup lang="ts">
  import { onMounted, ref, reactive } from 'vue';
  import { useRouter } from 'vue-router';
  import API_GOODS from '@/apis/goods';
  import API_BANNER from '@/apis/banner';
  import IMAGE_LIST_EMPTY from '@/assets/images/empty/good.png';
  import { UseListPagination, useList } from '@/hooks/shared/useList';

  onMounted(() => {

    loadMainList();
  });

  const router = useRouter();

  const bannerList = ref < Recordable[] > ([]);

  function getBannerList () {
    API_BANNER.bannerList({ type: 'indexBanner' }).then((res) => {
      bannerList.value = res.data || [];
    });
  }

  function onBannerClicked (linkUrl: string) {
    if (linkUrl) {
      window.location.href = linkUrl;
    }
  }

  const list = ref < Recordable[] > ([]);
  const pagination: UseListPagination = reactive({
    pageCurrent: 1,
    pageSize: 10,
  });
  const {
    loading,
    hasData,
    loadingMore,
    noMore,
    error: listError,
    meta: listMeta,
    loadData: loadMainList,
    loadMore: loadListMore,
    onError: onListError,
  } = useList(
    {
      api: getGoodList,
      fieldNames: {
        itemsField: 'result',
        totalRowField: 'totalRow',
      },
      meta: {
        loadingText: '努力加载中...',
        emptyText: '暂无商品',
        emptyImage: IMAGE_LIST_EMPTY,
      },
    },
    list,
    pagination,
  );

  function getGoodList () {
    const params = {
      page: pagination.pageCurrent,
      pageSize: pagination.pageSize,
    };

    return API_GOODS.goodsList(params);
  }

  function onGoodClicked (id: number) {
    router.push({ path: '/good/detail', query: { id } });
  }
</script>

<template>
  <div class="container">
    <div class="swiper">
      <van-swipe :autoplay="5000" class="swiper">
        <van-swipe-item v-for="item in bannerList" :key="item.id" class="swiper-item"
          @click="onBannerClicked(item.linkUrl)">
          <van-image class="swiper-item-img" fit="cover" :src="item.picUrl" :alt="item.title" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="main">
      <Plate class="section-header" title="商品列表" />
      <AppList v-model:loading="loading" v-model:loadingMore="loadingMore" mode="infinite" :error="listError"
        :hasData="hasData" :noMore="noMore" :meta="listMeta" @load-more="loadListMore" @click-error="onListError">
        <div class="list">
          <div v-for="item in list" :key="item.id" class="list-col">
            <div class="list-item" @click="onGoodClicked(item.id)">
              <div v-if="item.recommendStatus" class="list-item-badge">推荐</div>
              <van-image class="list-item-photo" :src="item.pic" :alt="item.name" />
              <div class="list-item-info">
                <div class="list-item-title">{{ item.name }}</div>
                <div class="list-item-price">
                  <div class="price">
                    <div class="price-current">
                      <span class="price-current-symbol">¥</span>
                      <span class="price-current-integer">{{ item.minPrice }}</span>
                    </div>
                    <div v-if="item.originalPrice > 0" class="price-origin">
                      <span class="price-origin-symbol">¥</span>
                      <span class="price-origin-integer">{{ item.originalPrice }}</span>
                    </div>
                  </div>
                  <van-button type="primary" plain class="buy-btn">购买</van-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </AppList>
    </div>
    <!-- 底部导航栏 -->
    <Tabbar />
  </div>
</template>

<style lang="less" scoped>
  .swiper {
    width: 100%;
    height: 180px;
    margin-bottom: 10px;

    &-item,
    &-item-img {
      width: 100%;
      height: 100%;
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    padding-left: 5px;
    padding-right: 5px;

    &-col {
      width: 50%;
      box-sizing: border-box;
      padding-left: 5px;
      padding-right: 5px;
      margin-bottom: 10px;
    }

    &-item {
      position: relative;
      text-align: left;
      overflow: hidden;
      background: var(--color-bg-2);
      border-radius: 8px;
      // box-shadow: 0px 2px 4px 3px rgba(243, 243, 243, 0.5);

      &-badge {
        position: absolute;
        top: 15px;
        left: 0;
        z-index: 20;
        display: inline-block;
        padding: 2px 4px;
        color: #fff;
        background-color: var(--color-red);
        font-size: 10px;
        line-height: normal;
        border-radius: 0 8px 8px 0;
        padding-right: 6px;
      }

      &-photo {
        display: flex;
        width: 100%;
        height: 172px;
      }

      &-info {
        padding: 5px 10px;
      }

      &-title {
        font-size: 14px;
        color: var(--color-text-1);
        min-height: 36px;
        line-height: 18px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &-price {
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .buy-btn {
        height: 24px;
        padding: 0 8px;
        line-height: 24px;
      }

      .price {
        display: flex;
        align-items: center;

        &-current {
          margin-right: 5px;
          color: var(--color-primary);

          &-symbol {
            font-size: 12px;
            margin-right: 2px;
          }

          &-integer {
            font-size: 18px;
            font-family: @font-family-price-integer;
          }
        }

        &-origin {
          font-size: 12px;
          text-decoration: line-through;
          color: var(--color-text-3);

          &-label {
            margin-right: 2px;
          }

          &-integer {
            text-decoration: line-through;
            font-family: @font-family-price-integer;
          }
        }
      }
    }
  }
</style>